<template>
  <div class="recommendMusic" @click="goPlayMusic(itemdata.id)">
    <img :src="itemdata.picUrl" alt="" />
    <div class="context">
      <p class="context_name">{{ itemdata.name }}</p>
      <p class="context_author"><span class="tag">SQ</span>王一博</p>
    </div>
    <div class="right">></div>
  </div>
</template>

<script>
export default {
  props: {
    itemdata: {
      type: Object,
    },
  },
  methods: {
    goPlayMusic(id) {
      //
      console.log("组件中");

      this.$router.push({ path: "/playmusic", query: { id } });
    },
  },
};
</script>

<style scoped lang="less">
.recommendMusic {
  margin-top: 30px;
  display: flex;
  height: 5rem;
  align-items: center;
  //    background:red;

  img {
    height: 5rem;
    border-radius: 50px;
    margin-right: 40px;
  }
  .context {
    color: #666;
    flex: 1;
    overflow: hidden;
    .context_name {
      font-size: 1.05rem;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .context_author {
      font-size: 0.95rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .right {
    text-align: right;
    margin-right: 20px;
  }
  .tag {
    display: inline-block;
    font-size: 0.75rem;
    transform: scale(0.8);
    border: 1px solid rgb(209, 209, 106);
    border-radius: 0.2rem;
    padding: 2px 10px;
    color: rgb(209, 209, 106);
  }
}
</style>